<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :maskClosable="maskClosable"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model
      ref="addForm"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      labelAlign="left"
      :colon="colon"
      :rules="formRules"
    >
      <a-row type="flex"  justify="center">
        <a-col :span="24">
          <a-form-model-item label="字典类型" >
            <a-auto-complete
              placeholder="请填写字典类型"
              @search="handleSearch"
              @select="handleSelect"
              v-model="form.dictName"
            >
              <template slot="dataSource" >
                <a-select-option v-for="item in showDataTypeList" :key="item.dictType">
                  {{ item.dictName }}
                </a-select-option>
              </template>
            </a-auto-complete>
          </a-form-model-item>
        </a-col>

        <a-col :span="24" >
          <a-form-model-item label="类型编码" >
            <a-input placeholder="请填写类型编码" v-model="form.dictType" />
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="字典标签" >
            <a-input placeholder="请填写字典标签" v-model="form.dictLabel" />
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="字典值" >
            <a-input placeholder="请填写字典值" v-model="form.dictValue" />
          </a-form-model-item>
        </a-col>

        <a-col :span="4">
        </a-col>

        <a-col :span="10" >
          <a-form-model-item label="状态" class="margin-left-30">
            <a-switch checked-children="启用"  un-checked-children="停用" :checked="statusActive"
                      @change="statusChange" />
          </a-form-model-item>
        </a-col>

        <a-col :span="10">
          <a-form-model-item label="排序" >
            <a-input-number v-model="form.dictSort" class="margin-left-30" />
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="备注" >
            <a-textarea
              placeholder="请填写描述信息"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              v-model="form.remark"
            />
          </a-form-model-item>
        </a-col>

      </a-row>

    </a-form-model>
  </a-modal>

</template>

<script>

  import {typeList,add} from "@/static/api/base/dict"

  //添加字典数据模式框
    export default {
      name: "add",
      created(){
        //初始化字典类型列表
        this.initDataTypeList();
        //初始化表单
        this.initForm();
      },
      data(){
          return {
            title:'添加字典数据',
            maskClosable:false,
            visible: false,
            confirmLoading: false,
            labelCol:{ span: 4 },
            wrapperCol:{ span: 19 },
            colon: false,
            value:'',
            bodyStyle:{"top": "50px;"},
            statusActive:true,   //页面中状态是否为正常状态
            dataTypeList:[],  //后台获取到的所有用户类型
            showDataTypeList:[],  //自动补全功能展示的所有用户类型
            formRules:{ },
            form:{ },
          }
      },
      methods:{
        //确定按钮保存页面数据
        handleOk() {
          this.$refs.addForm.validate(valid =>{
            add(this.form).then(res => {
              debugger
              if (res.data.code == 2000){
                this.handleCancel();
                this.$parent.getPage();
              }
            })
          });
        },
        handleCancel() {
          this.visible=false;
        },
        //显示添加框
        showAdd(){
          this.initDataTypeList();
          this.visible=true;

        },
        initDataTypeList() {
           typeList().then(res => {
            this.dataTypeList = res.data.data;
            this.showDataTypeList = this.dataTypeList;
          })
        },
        //自动补全，搜索补全时调用
        handleSearch(value){
          this.showDataTypeList=[];
          this.dataTypeList.map(i => {
            if (i.dictName.indexOf(value) != -1){
              this.showDataTypeList.push(i);
            }
          })
        },
        //自动补全，选中选项调用
        handleSelect(value, option){
          this.form.dictType = value;
        },
        //初始化表单form
        initForm(){
          this.form={
            dictName:'',
            dictType:'',
            dictLabel:'',
            remark:'',
            status:1,
            dictSort:1,
          }
        },
        //改变状态值
        statusChange(checked, event){
          debugger
          this.statusActive = checked;
          if (checked){
            this.form.status=1;
          }else{
            this.form.status=2;
          }

        }
      }
    }
</script>

<style scoped>
  .ant-modal {
    top: 50px;
  }
  .ant-form-item{
    margin-bottom :7px;
  }

</style>
